<template>
    <div :id="props.id" style="width:100%;height:100%" ></div>
   </template>
   
   <script setup>
   import { ref, onMounted,defineProps,watch } from "vue";
   import * as echarts from "echarts";
   
   let props = defineProps({
       id:{
           type:String,
           default:''
       },
       data:{
           type:Object,
           default:()=>{}
       },
    
   })
   
   
   
   
   let init = () => {
       var myChart = echarts.init(document.querySelector(`#${props.id}`));
     
       myChart.setOption(props.data);
   
       window.onresize = function () {
             myChart.resize();
   };
   }
   
   
   watch(props,(newV)=>{
      
       setTimeout(() => {
           init()
       }, (200));
    
    
   },{immediate:true})
   
   
   </script>
   
   
   
   
   <style scoped>
   </style>
   